<template>
    <el-dialog v-el-drag-dialog :title="showForm ? '审核' : '预览'" :visible="visible" @update:visible="updateVisible" @closed="doCloseEdit">
        <iframe
            v-if="visible"
            id="frame"
            title="frame"
            scrolling="no"
            :style="computedIframeStyle"
            :src="diyUrl"
        />
        <el-form ref="addForm" hide-required-asterisk size="mini" :model="form" :show-message="false" label-width="80px" v-if="showForm">
            <el-form-item label="状态" prop="name">
                <!-- -1 审核不通过 1:审核通过 -->
                <el-radio-group v-model="form.state">
                    <el-radio :label="-1">审核不通过</el-radio>
                    <el-radio :label="1">审核通过</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="审核意见">
                <el-input type="textarea" v-model="form.reason" maxlength="200" :show-word-limit="true"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <template v-if="showForm">
                <bs-confirm-button-icon size="mini" @click.native="okClick" :text="'确定'" />
                <bs-cancel-button-icon size="mini" @click.native="doCloseEdit" />
            </template>
            <template v-else>
                <bs-cancel-button-icon size="mini" @click.native="doCloseEdit" />
            </template>
        </div>
    </el-dialog>
</template>

<script>
import { requestOpts } from '@/utils/request.js'
import elDragDialog from '@/directive/el-drag-dialog'
export default {
    data() {
        return {
            deviceHeight: 0,
            diyUrl: '',
            form: {}
        }
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        data: {
            type: Object,
            default: () => {}
        },
        id: {
            type: [String, Number],
            default: '0'
        },
        type: {
            type: String,
            default: '1'
        },
        showForm: {
            type: Boolean,
            default: true
        }
    },
    directives: {
        elDragDialog
    },
    watch: {
        visible(val) {
            if(val) {
                this.init()
            }
        }
    },
    computed: {
        computedIframeStyle() {
            return {
                width: '100%',
                height: this.deviceHeight,
                overflow: 'hidden',
                border: 'none'
            }
        }
    },
    methods: {
        updateVisible(v) {
            this.$emit('update:visible', v)
        },
        doCloseEdit() {
            this.updateVisible(false)
        },
        init() {
            this.form = {
                id: this.id || 0,
                state: 1,
                reason: ''
            }
            this.deviceHeight = `510px`
            const token = localStorage.getItem('authorization')
            this.diyUrl =  ((requestOpts.diyUrl).endsWith('/') ? requestOpts.diyUrl : requestOpts.diyUrl  + '/') + 'preview?token=' + token + `&type=${this.type}&id=${this.id}&home=true`
        },
        okClick() {
            if(this.form.state == -1) {
                if(!this.form.reason) {
                    return this.$message.error('需要填写审核意见')
                }
            }
            this.$emit('audit', this.form)
        }
    }
}
</script>

<style scoped>
::v-deep .el-dialog__body {
    padding: 0px !important;
}
::v-deep .el-form {
    margin: 15px 15px 0 15px !important;
}
</style>
